<template>
	<view>
		<nav-bar title="技师选择" :customBack="true" @goBack="goBack"></nav-bar>
		<view class="top-box">
			<view class="top-bg"></view>
			<view class="top-data">
				<view class="top">
					<view class="left">
						<image class="img" :src="shopDetail.images" alt="" />
					</view>
					<view class="right">
						<view class="shop-name">
							<view class="name-left">
								<view class="name">{{ shopDetail.storeName }}</view>
								<view class="status">{{ shopDetail.status === 1 ? '营业中':'休息中' }}</view>
							</view>
						</view>
						<view class="shop-time">
							<view class="time-left">
								<u-icon name="clock" color="#666666" size="15"></u-icon>
								<view class="time">营业时间：{{ shopDetail.openingTime }} ~ {{ shopDetail.closingTime }}
								</view>
							</view>
						</view>
						<view class="shop-address">
							<view class="address-left">
								<view style="transform: translateX(-4rpx);">
									<u-icon name="file-text" color="#666666" size="18"></u-icon>
								</view>
								<view class="address">已选择项目：{{ transferData.projectName }}</view>
							</view>
						</view>
						<view class="shop-time">
							<view class="time-left">
								<u-icon name="clock" color="#666666" size="15"></u-icon>
								<view class="time">预约时间：{{ timeData.detailTime }}</view>
							</view>
						</view>
						<view class="shop-time" @click="makePhoneCall(shopDetail)">
							<view class="time-left">
								<u-icon name="phone" color="#666666" size="15"></u-icon>
								<view class="time">电话：{{ shopDetail.landlinePhone || '' }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="bottom-left">
					<u-icon name="warning" color="rgba(194, 126, 21, 1)" size="18"></u-icon>
					<view>有多位顾客请选择多位技师</view>
				</view>
				<view class="bottom-right" @click="makePhoneCall(shopDetail)">
					<u-icon name="phone-fill" color="#FFF" size="18"></u-icon>
					<view>电话咨询</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y :style="{ height: scrollHeight, paddingBottom: chooseData.length > 0 ? '150rpx' : '' }"
			class="contain">
			<view class="container">
				<view class="title">
					<view class="box-line">
					</view>
					<view class="text">请选择技师</view>
				</view>
			</view>
			<view v-if="isLoading" class="common-loading">
				<image class="loading-img" :src="baseIconUrl + 'icon_loading.png'" />
			</view>
			<pro-technician-list v-else-if="technicianList && technicianList.length > 0"
				:technicianList="technicianList" :transferData="transferData" :goodsList="goodsList"
				:goodsNumConfig="goodsNumConfig" @chooseClick="chooseClick" @chooseAgainClick="chooseAgainClick"
				@imageClick="imageClick" @toDetail="toMasterDetail" @minusGoods="minusGoods"
				:AppointmentTime='AppointmentTime' @plusGoods="plusGoods"></pro-technician-list>
			<view v-else class="common-no-data">
				<image class="no-data-img" :src="baseImgUrl + 'img_no_technician.png'" alt="" />
				<view class="text">暂无技师</view>
			</view>
		</scroll-view>
		<bottom-order ref="bottomOrder" :chooseData="chooseData" :transferData="transferData" :goodsList="goodsList"
			:goodsNumConfig="goodsNumConfig" @isTechnicianClick="FunisTechnicianClick" @setNumConfig="setNumConfig"
			@cancelItem="cancelItem"></bottom-order>
		<you-popup :popupVisible="couponShow" :showBtn="false" popupTitle="可使用优惠券" @popupClose="couponShow = false">
			<view slot="popupContent" class="coupon-content">
				<view class="coupon-item" v-for="(item, index) in couponData" :key="index"
					:style="{ background: `url(${baseImgUrl}img_coupon_bg.png) no-repeat` }">
					<view class="coupon-name">{{ item.name }}</view>
					<view class="num-box"><text class="num">x1</text>张</view>
					<view class="type-box">{{ item.couponTypeName }}</view>
				</view>
				<view class="popup-button" @click="couponShow=false">我知道了</view>
			</view>
		</you-popup>
		<you-popup2 :popupVisible="tipsVisible" popupTitle="温馨提示" :showBtn="false" @popupClose="tipsVisible = false">
			<view slot="popupContent" class="popup-content">
				当前技师服务将于{{ serviceStartTime }}开始，确定要预约吗？
				<view class="popup-submit flexJcac">
					<view class="no-submit" @click="clickCancelReservation">取消</view>
					<view class="submit" @click="clickConfirmReservation">确定</view>
				</view>
			</view>
		</you-popup2>
		<you-popup2 :popupVisible="busyVisible" popupTitle="温馨提示" :showBtn="false" @popupClose="busyVisible = false">
			<view slot="popupContent" class="popup-content">
				当前技师服务将于{{ serviceStartTime1 }}开始，确定要预约吗？
				<view class="popup-submit flexJcac">
					<view class="no-submit" @click="busyVisible = false">取消</view>
					<view class="submit" @click="clickConfirmBusy">确定</view>
				</view>
			</view>
		</you-popup2>
		<you-popup2 :popupVisible="isTechnicianClick" popupTitle="温馨提示" :showBtn="false"
			@popupClose="busyVisible = false">
			<view slot="popupContent" class="popup-content">
				{{technicianClick}}
				<view class="popup-submit flexJcac">
					<view class="submit" @click="isTechnicianClick=false">确定</view>
				</view>
			</view>
		</you-popup2>
	</view>
</template>

<script>
	import NavBar from "@/components/nav-bar"
	import Search from '@/components/search/index'
	import YouPopup from '@/components/you-popup/index'
	import YouPopup2 from '@/components/you-popup2/index'
	import ProTechnicianList from '@/subPages/components/proTechnicianList'
	import BottomOrder from './components/bottomOrder'
	import api_home from '@/api/home'
	import api_technician from '@/api/technician'
	import api_order from '@/api/order'
	import pageConfig from '@/config'
	export default {
		name: "chooseMaster",
		components: {
			NavBar,
			Search,
			YouPopup,
			YouPopup2,
			ProTechnicianList,
			BottomOrder
		},
		data() {
			return {
				baseImgUrl: pageConfig.baseImgUrl,
				baseIconUrl: pageConfig.baseIconUrl,
				busyVisible: false,
				isTechnicianClick: false,
				technicianClick: '',
				chooseTechnician: '',
				chooseIdx: '',
				scrollHeight: '',
				heightConfig: {},
				chooseData: [],
				chooseProject: {},
				technicianList: [],
				isLoading: false,
				shopDetail: {},
				show: false,
				couponShow: false,
				couponData: [],
				transferData: {},
				timeData: {},
				tipsVisible: false,
				reserveTechnicianData: null,
				serviceStartTime: '',
				serviceStartTime1: '',
				goodsList: [],
				goodsNumConfig: {},
				AppointmentTime: ''
			}
		},
		created() {
			this.chooseTechnician = uni.getStorageSync('chooseTechnician')
			if (this.chooseTechnician) {
				this.chooseData = uni.$u.deepClone(this.chooseTechnician)
				this.chooseData.forEach(item => {
					this.chooseProject[item.id] = {
						projectId: item.projectId,
						projectName: item.projectName,
						price: item.price,
						preferential: item.preferential,
						duration: item.duration
					}
				})
			}
			this.heightConfig = this.$store.getters.heightData
		},
		onLoad(options) {
			// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
			if (options.transferData) {
				this.transferData = JSON.parse(decodeURIComponent(options.transferData))
				this.AppointmentTime = this.transferData.reserveDate + ' ' + this.transferData.reserveTime
				this.getShopDetail(this.transferData.storeId)
			}
			this.timeData = {
				dateStr: this.transferData.reserveDate,
				timeStr: this.transferData.reserveTime
			}
			this.getTime()
			this.getCouponCard()
		},
		onReady() {
			this.getElementHeight()
			console.log('全局选取对象', this.$store.getters.chooseTechnicianNumber)
		},
		methods: {
			FunisTechnicianClick(val) {
				this.isTechnicianClick = true
				this.technicianClick = val
				console.log(val, 'val');
			},
			setNumConfig(val) {
				this.goodsNumConfig = uni.$u.deepClone(val)
			},
			//预约忙碌技师
			clickConfirmBusy() {
				this.technicianList[this.chooseIdx].isClick = this.technicianList[this.chooseIdx].isClick ? this
					.technicianList[this.chooseIdx].isClick +
					1 : 1
				const chooseData = [...this.chooseData, this.chooseTechnician]
				const zyOrderItemList = chooseData.map(item => {
					return {
						itemId: item.projectId,
						technicianId: item.id,
						subscribeStartTime: item.subscribeStartTime,
						subscribeStartTimeString: item.subscribeStartTime,
						paymentMoney: item.price,
						zyOrderProductList: item.zyOrderProductList || null
					}
				})
				const params = {
					regionId: this.transferData.regionId,
					regionName: this.transferData.regionName,
					storeId: this.transferData.storeId,
					storeName: this.transferData.storeName,
					subscribeStartTime: this.transferData.reserveDate + ' ' + this.transferData.reserveTime,
					zyOrderItemList,
				}
				api_technician.fetchTechnicianStartTime(params).then(res => {
					const newChooseTechnician = chooseData.slice(0, chooseData.length - 1)
					if (newChooseTechnician.length) {
						this.chooseData = [...newChooseTechnician, {
							...this.chooseTechnician,
							subscribeStartTime: res.subscribeStartTime,
							subscribeEndTime: res.subscribeEndTime
						}]
					} else {
						this.chooseData = [{
							...this.chooseTechnician,
							subscribeStartTime: res.subscribeStartTime,
							subscribeEndTime: res.subscribeEndTime
						}]
					}
					// 更新当前技师选中的次数
					const chooseTechnicianNumber = this.$store.getters.chooseTechnicianNumber
					this.$store.commit('TECHNICIAN_NUMBER', {
						...chooseTechnicianNumber,
						[this.chooseTechnician.id]: chooseTechnicianNumber[this.chooseTechnician.id] ?
							chooseTechnicianNumber[this.chooseTechnician.id] - 1 : 1
					})
					this.getGoodsConfig('chooseData')
					uni.setStorageSync('chooseTechnician', this.chooseData)

					this.busyVisible = false
					this.$refs.bottomOrder.showDialog()
				})
			},
			getElementHeight() {
				this.$nextTick(() => {
					// 创建查询对象
					setTimeout(() => {
						const query = uni.createSelectorQuery().in(this)

						// 选择我们想要的元素
						query.select('.top-box').boundingClientRect(data => {
							// data是一个包含元素尺寸信息的对象
							if (data) {
								// 获取元素高度
								const height = data.height
								this.scrollHeight = this.$store.getters.heightData.noTabMainHeight
									.split("px")[0] - height - 2 + 'px'
							}
						}).exec()
					}, 200)
				})
			},
			goBack() {
				const params = encodeURIComponent(JSON.stringify(this.transferData))
				uni.setStorageSync('transferData', params)
				uni.navigateBack()
			},
			makePhoneCall(shopDetail) {
				uni.makePhoneCall({
					phoneNumber: shopDetail.landlinePhone, // 替换为您要拨打的电话号码
					success: function() {
						console.log('拨打电话成功')
					},
					fail: function(err) {
						console.error('拨打电话失败：' + JSON.stringify(err))
					}
				})
			},
			chineseDateStringToTimestamp(dateString) {
				// 使用正则表达式匹配日期字符串的各个部分
				const regex = /(\d{4})年(\d{2})月(\d{2})日(\d{2})时(\d{2})分/;
				const match = dateString.match(regex);

				if (match) {
					// 提取匹配到的年份、月份、日期、小时和分钟
					const [, year, month, day, hour, minute] = match;

					// 注意：JavaScript 的 Date 对象月份是从 0 开始的，所以需要将月份减 1
					const date = new Date(Date.UTC(parseInt(year), parseInt(month) - 1, parseInt(day), parseInt(hour),
						parseInt(minute), 0));

					// 获取时间戳（以毫秒为单位）
					const timestamp = date.getTime();

					return timestamp;
				} else {
					// 如果匹配失败，可以抛出一个错误或者返回一个特定的值
					console.error('Invalid date string format');
					return null;
				}
			},
			getTechnician() {
				this.isLoading = true
				const params = {
					itemStoreId: this.transferData.projectId,
					date: this.timeData.dateStr.split('/').join('-'),
					time: this.timeData.timeStr,
					minproIsshow: 1,
					state: 1
				}
				api_technician.fetchTechnicianByPro(params).then((res) => {
					this.isLoading = false
					const data = res.rows
					if (data.length > 0) {
						data.forEach((item) => {
							item.price = this.transferData.price
							item.preferential = this.transferData.preferential
							item.projectName = this.transferData.projectName
							item.projectId = this.transferData.projectId
							item.duration = this.transferData.duration,
								item.subscribeStartTime = this.transferData.reserveDate + ' ' + this
								.transferData.reserveTime,
								item.memberType = this.transferData.memberType
						})
						var date = new Date(this.AppointmentTime)
						var currentTimestamp = date.getTime() // 获取当前时间的时间戳（毫秒数）
						this.technicianList = data.map(function(item) {
							var serviceEndTime = item.serviceEndTime // 获取服务结束时间的时间戳
							var timeDiffInMs = serviceEndTime - currentTimestamp // 计算时间差（毫秒数）
							var timeDiffInMinutes = Math.floor(timeDiffInMs / 60000) // 将毫秒数转换为分钟数并向下取整
							item.timeDiffInMinutes = timeDiffInMinutes // 将计算得到的分钟数保存到对象中
							return item
						})
						this.getChooseItem()
						this.getGoodsList()
					} else {
						this.technicianList = []
					}
				}).catch(err => {
					this.isLoading = false
				})
			},
			getChooseItem() {
				this.technicianList.forEach(item => {
					this.chooseData.forEach(cItem => {
						const cTime = cItem.subscribeStartTime.slice(0, cItem.subscribeStartTime.length -
							3)
						const iTime = item.subscribeStartTime.slice(0, item.subscribeStartTime.length - 3)
						// 相同技师相同项目
						if (item.id === cItem.id && cTime === iTime && cItem.projectId === this
							.transferData.projectId) {
							item.isClick = item.isClick ? item.isClick + 1 : 1
						}
					})
				})
			},
			getShopDetail(id) {
				api_home.fetchShopDetail(id).then((res) => {
					this.shopDetail = res.data
					uni.setStorageSync('chargebackExplain', this.shopDetail.chargebackExplain)
					this.getTechnician()
				})
			},
			getTime() {
				const date = this.timeData.dateStr.includes('-') ? this.timeData.dateStr.split('-') : this.timeData.dateStr
					.split('/')
				const time = this.timeData.timeStr.split(':')
				this.timeData.detailTime = `${date[0]}年${date[1]}月${date[2]}日${time[0]}时${time[1]}分`
				this.timeData.shopTime = `${date[0]}年${date[1]}月${date[2]}日${this.timeData.timeStr}`
			},
			getCouponCard() {
				api_home.fetchSysCouponList({
					storeId: this.transferData.storeId,
					couponTypeValue: 3,
					getPath: 2
				}).then((res) => {
					this.couponData = res.data
					this.couponShow = res.data.length
				})
			},
			// 附件商品数据
			getGoodsList() {
				const params = {
					storeId: this.transferData.storeId,
					status: 1,
					minproIsshow: 1
				}
				api_order.fetchAccessory(params).then((res) => {
					if (res.code !== 200) return
					this.goodsList = res.rows
					this.getGoodsConfig('technicianList')
				})
			},
			getGoodsConfig(dataNum) {
				this[dataNum].forEach(item => {
					this.goodsList.forEach(gItem => {
						const goodsNumStr = item.id + item.projectId + item.subscribeStartTime.slice(0,
							item.subscribeStartTime.length - 3)
						this.goodsNumConfig[goodsNumStr] = this.goodsNumConfig[goodsNumStr] || {}
						this.goodsNumConfig = {
							...this.goodsNumConfig,
							[goodsNumStr]: {
								...this.goodsNumConfig[goodsNumStr],
								[gItem.id]: this.goodsNumConfig[goodsNumStr][gItem.id] ? this
									.goodsNumConfig[goodsNumStr][gItem.id] : 0
							}
						}
					})
				})
			},
			cancelItem(chooseData, item) {
				this.chooseData = uni.$u.deepClone(chooseData)
				this.technicianList.forEach(tItem => {
					if (tItem.projectId === item.projectId) {
						tItem.isClick -= 1
					}
				})
			},
			chooseClick(item, idx) {
				console.log('选中技师及项目-->', item, idx)
				if (item.timeDiffInMinutes > 0 && item.status === '已预约') {
					console.log('该技师忙碌中')
					this.chosseclickFunTime(item, idx)
				} else {
					console.log('该技师空闲中')
					this.technicianList[idx].isClick = this.technicianList[idx].isClick ? this.technicianList[idx]
						.isClick +
						1 : 1
					const chooseData = [...this.chooseData, item]
					const zyOrderItemList = chooseData.map(item => {
						return {
							itemId: item.projectId,
							technicianId: item.id,
							subscribeStartTime: item.subscribeStartTime,
							subscribeStartTimeString: item.subscribeStartTime,
							paymentMoney: item.price,
							zyOrderProductList: item.zyOrderProductList || null
						}
					})
					const params = {
						regionId: this.transferData.regionId,
						regionName: this.transferData.regionName,
						storeId: this.transferData.storeId,
						storeName: this.transferData.storeName,
						subscribeStartTime: this.transferData.reserveDate + ' ' + this.transferData.reserveTime,
						zyOrderItemList,
					}
					api_technician.fetchTechnicianStartTime(params).then(res => {
						const newChooseTechnician = chooseData.slice(0, chooseData.length - 1)
						if (newChooseTechnician.length) {
							this.chooseData = [...newChooseTechnician, {
								...item,
								subscribeStartTime: res.subscribeStartTime,
								subscribeEndTime: res.subscribeEndTime
							}]
						} else {
							this.chooseData = [{
								...item,
								subscribeStartTime: res.subscribeStartTime,
								subscribeEndTime: res.subscribeEndTime
							}]
						}
						// 更新当前技师选中的次数
						const chooseTechnicianNumber = this.$store.getters.chooseTechnicianNumber
						this.$store.commit('TECHNICIAN_NUMBER', {
							...chooseTechnicianNumber,
							[item.id]: chooseTechnicianNumber[item.id] ? chooseTechnicianNumber[item.id] -
								1 : 1
						})
						this.getGoodsConfig('chooseData')
						uni.setStorageSync('chooseTechnician', this.chooseData)
						this.$refs.bottomOrder.showDialog()
					})
				}
			},
			chosseclickFunTime(item, idx) {
				this.chooseTechnician = item
				this.chooseIdx = idx
				let zyOrderItemList = []
				zyOrderItemList.push({
					itemId: item.projectId,
					technicianId: item.id,
					subscribeStartTime: item.subscribeStartTime || this.transferData.reserveDate + ' ' + this
						.transferData.reserveTime,
					subscribeStartTimeString: item.subscribeStartTime || this.transferData.reserveDate + ' ' + this
						.transferData.reserveTime,
					paymentMoney: item.price
				})
				const params = {
					regionId: this.transferData.regionId,
					regionName: this.transferData.regionName,
					storeId: this.transferData.storeId,
					storeName: this.transferData.storeName,
					subscribeStartTime: this.transferData.reserveDate + ' ' + this.transferData.reserveTime,
					zyOrderItemList,
				}
				api_technician.fetchTechnicianStartTime(params).then(res => {
					// this.reserveTechnicianData = [{
					// 	...item,
					// 	subscribeStartTime: res.subscribeStartTime,
					// 	subscribeEndTime: res.subscribeEndTime
					// }]
					this.serviceStartTime1 = res.subscribeStartTime
					this.busyVisible = true
				})
			},
			chooseAgainClick(item, idx) {
				this.reserveTechnician = item
				this.reserveTechnicianIndex = idx
				const chooseTechnician = uni.getStorageSync('chooseTechnician')
				console.log(chooseTechnician, 'chooseTechnician');
				let zyOrderItemList = chooseTechnician.map(zItem => {
					return {
						itemId: zItem.projectId,
						technicianId: zItem.id,
						subscribeStartTime: zItem.subscribeStartTime,
						subscribeEndTime: zItem.subscribeEndTime,
						subscribeStartTimeString: zItem.subscribeStartTime,
						paymentMoney: zItem.price,
						zyOrderProductList: zItem.zyOrderProductList || null
					}
				})
				zyOrderItemList = zyOrderItemList.filter(zItem => zItem.technicianId === item.id)
				zyOrderItemList.push({
					itemId: item.projectId,
					technicianId: item.id,
					subscribeStartTime: item.subscribeStartTime || this.transferData.reserveDate + ' ' + this
						.transferData.reserveTime,
					subscribeStartTimeString: item.subscribeStartTime || this.transferData.reserveDate + ' ' + this
						.transferData.reserveTime,
					paymentMoney: item.price
				})
				const params = {
					regionId: this.transferData.regionId,
					regionName: this.transferData.regionName,
					storeId: this.transferData.storeId,
					storeName: this.transferData.storeName,
					subscribeStartTime: this.transferData.reserveDate + ' ' + this.transferData.reserveTime,
					zyOrderItemList,
				}
				api_technician.fetchTechnicianStartTime(params).then(res => {
					this.reserveTechnicianData = [...chooseTechnician, {
						...item,
						subscribeStartTime: res.subscribeStartTime,
						subscribeEndTime: res.subscribeEndTime
					}]
					this.serviceStartTime = res.subscribeStartTime
					this.tipsVisible = true
				})
			},
			clickConfirmReservation() {
				const idx = this.reserveTechnicianIndex
				this.technicianList[idx].isClick = this.technicianList[idx].isClick ? this.technicianList[idx].isClick +
					1 : 1
				// 更新当前技师选中的次数
				const chooseTechnicianNumber = this.$store.getters.chooseTechnicianNumber
				const id = this.reserveTechnician.id
				this.$store.commit('TECHNICIAN_NUMBER', {
					...chooseTechnicianNumber,
					[id]: chooseTechnicianNumber[id] ? chooseTechnicianNumber[id] + 1 : 1
				})
				this.chooseData = uni.$u.deepClone(this.reserveTechnicianData)
				this.getGoodsConfig('chooseData')
				uni.setStorageSync('chooseTechnician', this.chooseData)
				this.tipsVisible = false
				this.$refs.bottomOrder.showDialog()
			},
			clickCancelReservation() {
				this.tipsVisible = false
			},
			toMasterDetail(item) {
				uni.navigateTo({
					url: `/subPages/technician/technicianDetail?id=${item.id}`,
				})
			},
			minusGoods(item, gItem, number) {
				const goodsNumStr = item.id + item.projectId + item.subscribeStartTime.slice(0, item.subscribeStartTime
					.length - 3)
				this.goodsNumConfig = {
					...this.goodsNumConfig,
					[goodsNumStr]: {
						...this.goodsNumConfig[goodsNumStr],
						[gItem.id]: number === 0 ? 0 : number - 1
					}
				}
				this.chooseData = this.chooseData.map(dItem => {
					const dTime = dItem.subscribeStartTime.slice(0, dItem.subscribeStartTime.length - 3)
					const iTime = item.subscribeStartTime.slice(0, item.subscribeStartTime.length - 3)
					if (dItem.id === item.id && dTime === iTime && dItem.projectId === item.projectId) {
						if (this.goodsNumConfig[goodsNumStr][gItem.id] >= 1) {
							dItem.zyOrderProductList.forEach(pItem => {
								if (pItem.id === gItem.id) {
									pItem.productNum = this.goodsNumConfig[goodsNumStr][gItem.id]
								}
							})
						} else {
							if (dItem.zyOrderProductList) {
								dItem.zyOrderProductList = dItem.zyOrderProductList.filter(zItem => zItem.id !==
									gItem.id)
							}
						}
					}
					return dItem
				})
				uni.setStorageSync('chooseTechnician', this.chooseData)
			},
			plusGoods(item, gItem, number) {
				const goodsNumStr = item.id + item.projectId + item.subscribeStartTime.slice(0, item.subscribeStartTime
					.length - 3)
				this.goodsNumConfig = {
					...this.goodsNumConfig,
					[goodsNumStr]: {
						...this.goodsNumConfig[goodsNumStr],
						[gItem.id]: number + 1
					}
				}
				this.chooseData = this.chooseData.map(dItem => {
					const dTime = dItem.subscribeStartTime.slice(0, dItem.subscribeStartTime.length - 3)
					const iTime = item.subscribeStartTime.slice(0, item.subscribeStartTime.length - 3)
					if (dItem.id === item.id && dTime === iTime && dItem.projectId === item.projectId) {
						if (this.goodsNumConfig[goodsNumStr][gItem.id] > 1) {
							dItem.zyOrderProductList.forEach(pItem => {
								if (pItem.id === gItem.id) {
									pItem.productNum = this.goodsNumConfig[goodsNumStr][gItem.id]
								}
							})
						} else {
							dItem.zyOrderProductList = dItem.zyOrderProductList ? [...dItem.zyOrderProductList] :
							[]
							dItem.zyOrderProductList.push({
								id: gItem.id,
								productNum: 1,
								productName: gItem.productName,
								originalPrice: gItem.originalPrice
							})
						}
					}
					return dItem
				})
				uni.setStorageSync('chooseTechnician', this.chooseData)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 604rpx;
		// height: 597rpx;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		opacity: 1;
		padding: 0 27rpx 37rpx;

		.title {
			font-size: 34rpx;
			font-weight: bold;
			color: #333333;
			text-align: center;
			padding: 26rpx 0 30rpx 0;
		}

		.box {
			width: 100%;
			margin-bottom: 19rpx;
			position: relative;
			// background-color: red;

			img {
				width: 100%;
				height: 147rpx;
				z-index: 0;
			}

			.tag {
				position: absolute;
				top: 15rpx;
				left: 14rpx;
				width: 86rpx;
				height: 32rpx;
				background: linear-gradient(90deg, #F0A482 0%, #EC7D53 100%);
				border-radius: 21rpx 0rpx 25rpx 0rpx;
				opacity: 1;
				z-index: 5;
				font-size: 20rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 32rpx;
				text-align: center;
			}

			// .text {
			//   display: flex;
			//   justify-content: space-between;

			.name {
				position: absolute;
				top: 40%;
				left: 10%;
				font-size: 28rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}

			.number {
				position: absolute;
				top: 31%;
				right: 5%;
				font-size: 44rpx;
				// font-family: DIN, DIN;
				font-weight: bold;
				color: #FFFFFF;



			}

			// }
		}

		.button {
			width: 100%;
			height: 87rpx;
			background: #C27E15;
			border-radius: 63rpx 63rpx 63rpx 63rpx;
			opacity: 1;
			font-size: 30rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 87rpx;
			text-align: center;
			margin-top: 40rpx;
		}
	}

	.top-bg {
		width: 100%;
		height: 120rpx;
		opacity: 1;
		background: rgba(194, 126, 21, 1);
	}

	.top-data {
		opacity: 1;
		border-radius: 17rpx 17rpx 0 0;
		background: rgba(255, 255, 255, 1);
		margin: 0 38rpx;
		margin-top: -100rpx;
		padding: 46rpx 44rpx 1rpx 42rpx;

		.top {
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;

			.left {
				width: 130rpx;
				height: 130rpx;
				position: relative;

				.img {
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
				}

			}

			.right {
				width: 72%;

				.shop-name {
					display: flex;
					justify-content: space-between;
					margin-bottom: 14rpx;

					.name-left {
						display: flex;

						.name {
							font-size: 32rpx;
							font-weight: 500;
							color: rgba(51, 51, 51, 1);
							height: 37rpx;
							line-height: 37rpx;
						}

						.tag-number {
							width: 80rpx;
							height: 37rpx;
							opacity: 1;
							border-radius: 8rpx;
							line-height: 37rpx;
							border: 1rpx solid rgba(253, 90, 57, 1);
							text-align: center;
							font-size: 20rpx;
							font-weight: 400;
							color: rgba(253, 89, 57, 1);
							margin-left: 20rpx;
						}

						.status {
							width: 99rpx;
							height: 37rpx;
							opacity: 1;
							border-radius: 8rpx;
							background: rgba(255, 237, 234, 1);
							line-height: 37rpx;
							font-size: 20rpx;
							font-weight: 400;
							color: rgba(253, 89, 57, 1);
							text-align: center;
							margin-left: 12rpx;
						}
					}
				}

				.shop-time {
					display: flex;
					justify-content: space-between;
					margin-bottom: 14rpx;

					.time-left {
						display: flex;

						.time {
							font-size: 22rpx;
							font-weight: 400;
							color: rgba(102, 102, 102, 1);
							margin-left: 10rpx;
						}
					}
				}

				.shop-address {
					display: flex;
					justify-content: space-between;
					margin-bottom: 14rpx;

					.address-left {
						display: flex;

						.address {
							font-size: 22rpx;
							font-weight: 400;
							color: rgba(102, 102, 102, 1);
							margin-left: 9rpx;
						}
					}
				}
			}
		}
	}

	.bottom {
		display: flex;
		height: 76rpx;
		border-radius: 0rpx 0rpx 17rpx 17rpx;
		margin: 0 38rpx;
		line-height: 76rpx;
		padding-bottom: 24rpx;

		.bottom-left {
			width: 60%;
			opacity: 1;
			background-color: #fff;
			border-radius: 0rpx 0rpx 0 17rpx;
			border: 1rpx solid rgba(194, 126, 21, 1);
			display: flex;
			justify-content: center;
			align-items: center;
			color: rgba(194, 126, 21, 1);
		}

		.bottom-right {
			width: 40%;
			opacity: 1;
			border-radius: 0rpx 0rpx 17rpx 0rpx;
			background: rgba(194, 126, 21, 1);
			display: flex;
			justify-content: center;
			align-items: center;
			color: rgba(255, 255, 255, 1);

			img {
				width: 35rpx;
				height: 35rpx;
				margin-right: 12rpx;
			}
		}
	}

	.contain {
		padding: 0 38rpx;
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;

		.container {
			width: 100%;
			padding-top: 45rpx;

			.title {
				position: relative;

				.box-line {
					position: absolute;
					left: 0;
					top: 0;
					width: 15rpx;
					height: 48rpx;
					opacity: 1;
					background: rgba(194, 126, 21, 1);

				}

				.text {
					margin-left: 50rpx;
					font-size: 38rpx;
					font-weight: 600;
				}
			}
		}
	}

	.coupon-content {
		.coupon-item {
			position: relative;
			width: 100%;
			height: 150rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			background-size: auto 150rpx !important;

			.coupon-name {
				margin-left: 50rpx;
				padding-top: 6rpx;
				font-size: 34rpx;
			}

			.num-box {
				margin-right: 32rpx;
				color: #FFF;

				.num {
					margin-right: 4rpx;
					font-size: 44rpx;
				}
			}

			.type-box {
				position: absolute;
				top: 16rpx;
				left: 14rpx;
				padding: 2rpx 16rpx;
				border-radius: 19rpx 0 19rpx 0;
				font-size: 20rpx;
				color: #FFF;
				background-color: #f0a17f;
			}
		}

		.popup-button {
			width: 100%;
			height: 90rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: auto;
			border-radius: 90rpx;
			color: #FFF;
			background-color: #c27e15;
		}
	}

	.popup-content {
		padding: 0 30rpx 40rpx;
	}
</style>